<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>小伟花店</title>
		<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" />
		<script src="lib/bootstrap/js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script src="js/PlaceOrder.js"></script>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/PlaceOrder.css" />
		<script src="js/data.js"></script>
	</head>

	<body>
		<!-- 头部-->
		<div class="head">
			<a href="index.html">
				<img src="img/1.jpg" style="width: 100%;min-width: 1370px;">
			</a>

			<div class="navbar navbar-default">
				<!--导航栏标题部分-->
				<!--navbar-toggle打造导航栏按钮折叠的样式
					该类让按钮具备一定的样式并且让按钮小屏幕才可见
				-->

				<div class="navbar-header">
					<!--给其添加属性data-toggle="collapse"说嘛该按钮实现折叠的切换
							data-target="#nav-show"指定我切换的折叠div的id是nav-show
						-->
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-show">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="index.html">
						<img class="logo" src="img/logo.png" ></a>
				</div>

				<!--导航栏列表部分-->
				<!--给包含导航菜单的div加collapse类 navbar-collapse折叠该div
					collapse让该div不可见，navbar-collapse让其在非超小屏幕上可见-->
				<div id="nav-show" class="collapse navbar-collapse">
					<!--给ul添加类navbar-right右浮动-->
					<ul class="nav navbar-nav navbar-right" style="margin-right: 0;">
						<li>
							<a href="index.html">首页</a>
						</li>
						<li>
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">鲜花类型 </a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">玫瑰花</a>
								</li>
								<li>
									<a href="#">满天星</a>
								</li>
								<li>
									<a href="#">百合</a>
								</li>
								<li>
									<a href="#">马蹄</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">鲜花用途</a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">爱情鲜花</a>
								</li>
								<li>
									<a href="#">生日鲜花</a>
								</li>
								<li>
									<a href="#">祝贺鲜花</a>
								</li>
								<li>
									<a href="#">婚庆鲜花</a>
								</li>
								<li>
									<a href="#">商务鲜花</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">花语大全</a>
						</li>
						<li>
							<button href="#" id="login" data-toggle="modal" data-target="#modaLoginDiv">登录</button>
						</li>
						<li>
							<button href="#" id="login" data-toggle="modal" data-target="#modaRegisterDiv">注册</button>
						</li>
						<!--dropdown类将li打成绝对定位-->
						<li class="dropdown">
							<!--data-toggle="dropdown"下拉切换数据-->
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">个人中心
								<samp class="caret"></samp>
							</a>
							<!--dropdown-menu类菜单样式并且不可见-->
							<ul class="dropdown-menu">
								<li>
									<a href="#">个人主页</a>
								</li>
								<li>
									<a href="#">我的订单</a>
								</li>
								<li>
									<a href="#">余额:520元</a>
								</li>
								<li>
									<a href="#">服务流程</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			<!--放一个登录模态框的容器  -->
			<div class="modal" id="modaLoginDiv" style="background-color: rgba(0,0,0,0.5);">
				<!--模态框是覆盖整个页面的，在里面放置个模态对话框，里面放模态内容 添加个madal-dialog-->
				<div class="modal-dialog">
					<!--放模态框内容的div-->
					<div class="modal-content">
						<!--data-dismiss = "modal" 消除模态框功能-->
						<button type="button" class="close" data-dismiss="modal"><span style="color: red;" class="glyphicon glyphicon-remove"></span></button>
						<div class="modal-header">
							<h2>登录</h2></div>
						<div class="modal-body">
							<form id="form1">
								<div class="form-group">
									<label for="user">帐号</label>
									<input autofocus="autofocus" onblur="validateUser()" type="text" class="form-control" id="user" name="user"><span id="userSpan"></span>
								</div>
								<div class="form-group">
									<label for="pwd">密码</label>
									<input type="password" autofocus="autofocus" onblur="validatePwd()" class="form-control" id="pwd" name="pwe"><span id="pweSpan"></span>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button class="btn btn-success" style="float: left;" data-dismiss="modal" data-toggle="modal" data-target="#modaRegisterDiv"><h5>没有有帐号注册</h5></button>
							<button onclick="register()" id="register" class="btn btn-primary"><h5>登录</h5></button>
						</div>
					</div>
				</div>
			</div>
			<!--放一个注册模态框的容器-->
			<div class="modal" id="modaRegisterDiv" style="background-color: rgba(0,0,0,0.5); ">
				<!--模态框是覆盖整个页面的，在里面放置个模态对话框，里面放模态内容 添加个madal-dialog-->
				<div class="modal-dialog">
					<!--放模态框内容的div-->
					<div class="modal-content">
						<!--data-dismiss = "modal" 消除模态框功能-->
						<button type="button" class="close" data-dismiss="modal"><span style="color: red;" class="glyphicon glyphicon-remove"></span></button>
						<div class="modal-header">
							<h2>注册</h2></div>
						<div class="modal-body">
							<form id="form1">
								<div class="form-group">
									<label for="loginUser">帐号</label>
									<input type="text" autofocus="autofocus" onblur="validateEnrollUser()" class="form-control" id="enrollUser" name="enrollUserSpan"><span id="enrollUserSpan"></span>
								</div>
								<div class="form-group">
									<label for="pwd">密码</label>
									<input type="password" autofocus="autofocus" onblur="validateEnrollPwd()" class="form-control" id="enrollPwd" name="loginPwd"><span id="enrollPwdSpan"></span>
								</div>
								<div class="form-group">
									<label for="pwd">确认密码</label>
									<input type="password"   autofocus="autofocus" onblur="confirmEnrollPwd()" class="form-control" id="confirmPwd" name="confirmPwd"><span id="confirmPwdSpan"></span>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button onclick="login()" class="btn btn-primary" id="enroll">确认注册</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		<!--中间-->
		<div class="centre">
			<!--订购div-->
			<div class=" Overbooking">
				<!--左边-->
				<div class="left">
					<img id="urlImg" src="img/love/love1.png" />
					<!--左边下面-->
					<div class="next">
						<img src="img/love/love1.png" "/>
	    		     </div>
	    		     <!--商品分享收藏-->
	    		     <div class="ncs-handle ">
	    		     	<a><span class="glyphicon glyphicon-share ">分享(1)</span></a>
	    			    <a><span class="glyphicon glyphicon-check ">收藏(5)</span></a>
	    		     </div>
	    		</div>
	    		<!--中部-->
	    		<div class="middle-part ">
	    			<h4 style="font-weight: bold; margin-left: 20px; ">鲜花-玫瑰情缘</h4>
	    			<h6>材 料：11朵红玫瑰 搭配黄莺 </h6>
	    			<h6>包 装：白色网面包装纸扇形包装 红色蝴蝶结 礼盒包装</h6>
	    			<h6>附 送：免费附送精美贺卡，代写您的祝福。(您下单时可填写留言栏)</h6>
                    <h6>配 送：全国 （可配送至全国1000多城市，市区免配送费）</h6>
                    <div class="service ">
                    	<img src="img/dingdan.png " />
                    </div>
                     <h6 style="font-size: 21px;margin-left: 83px;margin-top: 68px;text-decoration: line-through; ">¥268.00</h6>
                     <p style="color:red;font-size: 21px;margin-left: 83px;margin-top: -6px; ">¥198.00</p>
                     <img style="width: 90px;height: 90px;margin-top: -69px;margin-left: 481px; " src="img/shouqian.png " />
	    		      <h6>配  送  至： 全国</h6>
	    		      <!--下单按钮部分-->
	    		      <div class="xiadan ">
	    		      	<div class="queren ">
	    		      	<input id="value" value="1" style="width: 43px; height: 43px; text-align: center;font-size: 24px; font-weight: bold; "/>
	    		      	<a  onClick="aClickUp() "><samp class="glyphicon glyphicon-chevron-up "></samp></a>
	    		      	<a onClick="aClickNext() " style="margin-top: 21px; "> <samp class="glyphicon glyphicon-chevron-down "></samp></a>
	    		      </div>
	    		      <a class="btn btn-success Place-order-btn " href="ShoppingOrder.html">立即下单</a>
	    		       <a class="btn btn-info dialogue-btn ">
	    		        <samp class="glyphicon glyphicon-headphones ">与克服对话</samp>	
	    		       </a>  
	    		      </div>
	    		</div>
	    		<!--右侧推荐-->
	    		<div class="right-Referral ">
	    			<div class="title ">看了又看</div>
	    			<ul>
	    				<li><a href=" "><img src="img/love/love2.png " alt=" " /></a><h4>￥ 131.00</h4></li>
	    				<li><a href=" "><img src="img/love/love3.png " alt=" " /></a><h4>￥ 279.00</h4></li>
	    				<li><a href=" "><img src="img/love/love4.png " alt=" " /></a><h4>￥ 360.00</h4></li>
	    				<li><a href=" "><img src="img/love/love5.png " alt=" " /></a><h4>￥ 200.00</h4></li>
	    				<li><a href=" "><img src="img/love/love6.png " alt=" " /></a><h4>￥ 181.00</h4></li>
	    				<li><a href=" "><img src="img/love/love7.png " alt=" " /></a><h4>￥ 251.00</h4></li>
	    				<li><a href=" "><img src="img/love/love8.png " alt=" " /></a><h4>￥ 317.00</h4></li>
	    				<li><a href=" "><img src="img/kinship/kinship1.png " alt=" " /></a><h4>￥ 431.00</h4></li>
	    			</ul>
	    		</div>
	    	</div>
	    	<!--商品详情部分-->
	        <div class="goods-introduce ">
	        	<!--商品介绍左边内容div-->
	        	<div class="goods-introduce-Left">
	        		<div class="mt ">
                       <span class="cur ">热门销售</span>
                    </div>
                    <!--图片-->
                    <div class="p-img "><a><img alt="蜜一样香甜 " src="img/kinship/kinship1.png "></a></div>
	        	      <!--标语-->
	        	     <h4 class="slogan ">蜜一样香甜</h4>
	        	     <samp class="glyphicon glyphicon-heart "> 热销12589件</samp>
	        	     <strong style="margin-left: 150px; color: red; ">￥159.00</strong>
	        	     <hr class="dashed "/>
	        	      <div class="p-img "><a> <img alt="蜜一样香甜 " src="img/kinship/kinship5.png "></a></div>
	        	      <!--标语-->
	        	     <h4 class="slogan ">你是我的爱</h4>
	        	     <samp class="glyphicon glyphicon-heart "> 热销15849件</samp>
	        	     <strong style="margin-left: 150px; color: red; ">￥259.00</strong>
	        	     <hr class="dashed "/>
	        	      <div class="p-img "><a> <img alt="蜜一样香甜 " src="img/kinship/kinship6.png "></a></div>
	        	      <!--标语-->
	        	     <h4 class="slogan ">幸福祝愿</h4>
	        	     <samp class="glyphicon glyphicon-heart "> 热销14549件</samp>
	        	     <strong style="margin-left: 150px; color: red; ">￥328.00</strong>
				</div>
			     <!---商品介绍右边内容div-->
			     <div class="goods-introduce-Right">
			     	<!--右侧商品介绍和商品评价-->
			     	<div class="goods-introduce-select">
			     		<!--商品介绍与评价导航栏-->
			     		<div class="goods-select-title">
			     			<!--商品详情介绍内容-->
			     			<div class="goods-introduce-content">
			     				<ul class="nav navbar-nav">
			     					<a class="introduce" href=""><li>商品介绍</li></a>
			     				    <a class="user-review" href=""><li>商品评价(734)</li></a>
			     				</ul>
			     			</div>
			     			
			     		</div>
			     		<!--介绍区域-->
			     		<div id="introduction-area">
			     			<!--编号-->
			     			<div class="numbering" >
			     				<p style="margin-left: 40px;">商家货号： h000003</p>
			     				<p style="margin-left: 70px;">品　　牌：小伟鲜花</p>
			     			</div>
			     			<img src="img/introduce/introduce1.jpg"/>
			     		    <img src="img/introduce/introduce2.jpg"/>
			     		    <img src="img/introduce/introduce3.jpg"/>
			     		    <img src="img/introduce/introduce4.jpg"/>
			     		</div>
			     	</div>
			     </div>
	        </div>
				     
    	<!--底部-->
    	<div class="bottom" style="margin-top: 341px;">
			<div class="faq-wrapper">
				<table cellspacing="5">
					<tr>
						<th>帮助中心</th>
						<th>支付方式</th>
						<th>售后服务</th>
						<th>客服中心</th>
						<th>关于我们</th>
						<th class="phone"><samp class="glyphicon glyphicon-phone-alt"></samp> 182-0989-6746</th>
					</tr>
					<tr>
						<td>
							<a href="">服务声明</a>
						</td>
						<td>
							<a href="">在线支付</a>
						</td>
						<td>
							<a href="">订单查询</a>
						</td>
						<td>
							<a href="">在线客服</a>
						</td>
						<td>
							<a href="">关于我们</a>
						</td>
						<td rowspan="3"><img src="img/weixin.png" /></td>
					</tr>
					<tr>
						<td>
							<a href="">如何注册会员</a>
						</td>
						<td>
							<a href="">银行汇款</a>
						</td>
						<td>
							<a href="">退换货政策</a>
						</td>
						<td>
							<a href="">配送范围</a>
						</td>
						<td>
							<a href="">联系我们</a>
						</td>

					</tr>
					<tr>
						<td>
							<a href="">积分兑换说明</a>
						</td>
						<td>
							<a href=""></a>
						</td>
						<td>
							<a href="">隐私条款</a>
						</td>
						<td>
							<a href=""></a>
						</td>
						<td>
							<a href="">合作及洽谈</a>
						</td>
					</tr>
				</table>
			</div>
			<div class="bootom-img">
			<img src="img/cf.png" />
			</div>
			<footer>
				<p>Copyright © 2017-2020 贵州-胡向伟 |贵ICP备1314520号</p>
				<p style="margin-left: 50px;">贵州网安备 5201314999999号</p>
			</footer>
		</div>
	</body>
</html>